<template>
	<view class="columnbox wdh-100 content" v-if="user!=''">
		<view class="wdh-100 rowbox jus top-box">
			<image src="https://zhongyi.jiayixunfang.cn/upload/logo.png" mode="aspectFill" class="user-img"></image>
			<view class="columnbox als">
				<view class="user-name">{{user.name}}</view>
				<view class="user-phone">{{user.phone}}</view>
			</view>
			<!-- <view class="rowbox remark">
				<view class="def-col set-btn">编辑备注</view>
				<u-icon style="margin-left: 10rpx;" name="arrow-right" size="20rpx" color="#919393"></u-icon>
			</view> -->
		</view>
		<view class="columnbox wdh-100 user-info">
			<view class="rowbox wdh-100 spb">
				<view class="info-s">
					性别：{{user.sex==1?'男':'女'}}
				</view>
				<view class="info-s">
					年龄：{{age}}岁
				</view>
			</view>
			<view class="rowbox wdh-100 spb">
				<view class="info-s">
					身高：{{user.height}}cm
				</view>
				<view class="info-s">
					体重：{{user.weight}}kg
				</view>
			</view>
			<view class="rowbox wdh-100 spb info-l">
				地区：{{user.province}}{{user.city}}{{user.county}}
			</view>
			<view class="rowbox wdh-100 info-l als" style="justify-content: flex-start;">
				既往史：<view class="columnbox als">
					<view> {{bingshi.text}}</view>
					<view class="img-list">
						<image v-for="(item,index) in bingshi.img" :key='index' @click="previewImg('jws',item)"
							:src="item" mode="aspectFill"></image>
					</view>
					<!-- 	<view> {{getJiwangshi(user.bingshi)}}</view>
					<view class="img-list">
						<image v-for="(item,index) in jwsImg" :key='index' @click="previewImg('jws',item)" :src="item"
							mode="aspectFill"></image>
					</view> -->
				</view>
			</view>
			<view class="rowbox wdh-100 info-l als" style="justify-content: flex-start;">
				过敏史：<view class="columnbox als">
					<view> {{guomin.text}}</view>
					<view class="img-list">
						<image v-for="(item,index) in guomin.img" :key='index' @click="previewImg('gms',item)"
							:src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="rowbox wdh-100 spb one-info">
			<view class="rowbox group-title">
				<image src="/static/img/group.png" mode="widthFix"></image>
				分组标签
			</view>
			<view class="rowbox">
				<view class="def-col set-btn">设置</view>
				<u-icon style="margin-left: 10rpx;" name="arrow-right" size="20rpx" color="#919393"></u-icon>
			</view>
		</view> -->
		<view class="columnbox wdh-100 spb one-info">
			<view class="rowbox wdh-100 spb">
				<view class="rowbox group-title">
					<image src="/static/img/document.png" mode="widthFix"></image>
					实体医疗机构病例
				</view>
				<view class="rowbox">
					<!-- <view class="def-col set-btn">提醒更新</view>
					<view style="color: #cbcbcb ;">｜</view> -->
					<view class="def-col set-btn" @click="showCase">查看全部</view>
				</view>
			</view>
			<view class="rowbox wdh-100 jus als">
				<view class="columnbox add-document" v-for="(item,index) in caseImgList" :key='index'>
					<view @click="deletCase(item)" class="delet-cion">
						<u-icon color="#000" name="close-circle-fill"></u-icon>
					</view>
					<image @click="previewCaseImg(item.image)" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="columnbox add-document" @click="addDocumentImg">
					<image src="/static/img/addimg.png" mode="aspectFill"></image>
					帮助上传
				</view>
			</view>
		</view>
		<view class="columnbox wdh-100 spb one-info">
			<view class="rowbox wdh-100 spb">
				<view class="q-title columnbox als">
					<view>病例列表</view>
					<view class="q-line"></view>
				</view>
				<!-- <view class="rowbox">
					<view class="def-col set-btn" @click="addCase">+录入病例</view>
					<u-icon style="margin-left: 10rpx;" name="arrow-right" size="20rpx" color="#919393"></u-icon>
				</view> -->
			</view>
			<view v-for="(item,index) in blList" :key='index' class="columnbox wdh-100">
				<view class="wdh-100 wz-title">图文问诊 <text>｜{{item.addtime}}</text> </view>
				<!-- <view class="columnbox wz-box">
					<view class="rowbox wdh-100 jus wz-name">问诊单
						<u-icon style="margin-left: 10rpx;" name="arrow-right" size="20rpx" color="#919393"></u-icon>
					</view>
					<view class="wdh-100 wz-detail">病情描述：{{item.zhenduan}}</view>
				</view> -->
				<view class="columnbox wz-box">
					<view class="rowbox wdh-100 jus wz-name">医生方案
						<!-- <u-icon style="margin-left: 10rpx;" name="arrow-right" size="20rpx" color="#919393"></u-icon> -->
					</view>
					<view class="wdh-100 wz-detail">患者：{{item.name}} {{item.sex==2?'女':'男'}} {{item.age}}岁</view>
					<view class="wdh-100 wz-detail">诊断：{{item.zhenduan}}</view>
					<view class="wdh-100 wz-detail">治疗：{{item.yijian}}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box spb">
			<view class="columnbox chat-box" @click="toChat">
				<image src="/static/img/chat.png" mode="widthFix"></image>
				去对话
			</view>
			<view class="rowbox">
				<!-- <view class="rowbox zd-btn">开指导单</view> -->
				<view @click="kaiFang" class="rowbox kf-btn">开方</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getdate from '@/utils/time.js'
	export default {
		data() {
			return {
				id: 0,
				user: '',
				age: 0,
				gmsImg: [],
				jwsImg: [],
				caseImgList: [],
				caseImg: [],
				blList: [],
				bingshi: {
					text: '',
					img: []
				},
				guomin: {
					text: '',
					img: []
				}
			};
		},
		onLoad(options) {
			this.id = parseInt(options.id)
			this.getDetail()
			this.getCase()
			this.getList()
		},
		methods: {
			getList() {
				this.$req.post('/user/binglis', {
					userid: this.id
				}).then(res => {
					if (res.data.data.length > 0) {
						res.data.data.forEach(resp => {
							resp.addtime = getdate.toLocalDate(resp.addtime)
						})
					}
					this.blList = res.data.data
				})
			},
			deletCase(v) {
				uni.showModal({
					title: "是否确认删除该病例",
					success: (res) => {
						if (res.confirm) {
							this.$req.post('/doctor/stjgbldel', {
								id: v.id
							}).then(res => {
								this.getCase()
							})
						}
					}
				})
			},
			previewCaseImg(image) {
				uni.previewImage({
					urls: this.caseImg,
					current: image
				})
			},
			getCase() {
				this.$req.post('/doctor/stjgbl', {
					userid: this.id
				}).then(res => {
					this.caseImgList = res.data.data.splice(0, 4)
					this.caseImg = this.caseImgList.map(img => {
						return img.image
					})
				})
			},
			showCase() {
				uni.navigateTo({
					url: '/pages/patient/caseList?id=' + this.id
				})
			},
			// 病例上传
			addDocumentImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.$req.uploadImg(res.tempFilePaths[0]).then(resp => {
							console.log(resp, '===')
							this.$req.post('/doctor/stjgbladd', {
								image: resp.data.data,
								userid: this.id
							}).then(res => {
								this.getCase()
							})
						})
					}
				})
			},
			previewImg(type, img) {
				uni.previewImage({
					urls: type == 'jws' ? this.bingshi.img : this.guomin.img,
					current: img
				})
			},
			getJiwangshi(v) {
				if (v.indexOf('text') < 0) {
					return v
				} else {
					this.jwsImg = JSON.parse(v).img == '' ? [] : JSON.parse(v).img.split(',')
					let info = JSON.parse(v).text
					if (info == '' && this.jwsImg.length == 0) {
						info = '无'
					}
					return info
				}
			},
			getGuomin(v) {
				if (v.indexOf('text') < 0) {
					return v
				} else {
					this.gmsImg = JSON.parse(v).img == '' ? [] : JSON.parse(v).img.split(',')
					let info = JSON.parse(v).text
					if (info == '' && this.gmsImg.length == 0) {
						info = '无'
					}
					return info
				}
			},
			// 添加病例
			addCase() {
				uni.navigateTo({
					url: './case?id=' + this.id
				})
			},
			kaiFang() {
				uni.navigateTo({
					url: '/packageA/yaofang/kaifang?id=' + this.id
				})
			},
			getDetail() {
				this.$req.post('/doctor/patientinfo', {
					userid: this.id
				}).then(res => {
					this.user = res.data.data.user
					let guomin = JSON.parse(res.data.data.user.guomin)
					this.guomin = {
						text: guomin.text,
						img: guomin.img == '' ? [] : guomin.img.split(',')
					}
					let bingshi = JSON.parse(res.data.data.user.bingshi)
					this.bingshi = {
						text: bingshi.text,
						img: bingshi.img == '' ? [] : bingshi.img.split(',')
					}
					this.getAge(res.data.data.user.shengri)
				})
			},
			getAge(birthday) {
				var today = new Date();
				var birthDate = new Date(birthday);
				var age = today.getFullYear() - birthDate.getFullYear();
				var monthDiff = today.getMonth() - birthDate.getMonth();
				if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				this.age = age - 1;
			},
			toChat() {
				uni.navigateTo({
					url: '/pages/chat/detail?id=' + this.user.memberid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.top-box {
		background: #F1F8F5;
		padding: 40rpx 32rpx;
		position: relative;

		.user-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		.user-name {
			color: #191919;
			font-size: 36rpx;
		}

		.user-phone {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.remark {
			position: absolute;
			right: 32rpx;
			font-size: 28rpx;
		}
	}

	.user-info {
		padding: 32rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: -10rpx;
		z-index: 2;
		font-size: 28rpx;
		color: #232323;
		padding-bottom: 12rpx;
	}

	.info-s {
		width: 50%;
		margin-bottom: 20rpx;
	}

	.info-l {
		margin-bottom: 20rpx;
		width: 100%;
	}

	.one-info {
		padding: 32rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.group-title {
		color: #232323;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.add-document {
		position: relative;

		.delet-cion {
			position: absolute;
			z-index: 2;
			top: -4rpx;
			right: -4rpx;
			background: #fff;
			border-radius: 100rpx;
		}

		image {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
		}

		font-size: 20rpx;
		color: #8998A6;
		margin-top: 40rpx;
		margin-right: 20rpx;
	}

	.set-btn {
		font-size: 24rpx;
		font-weight: bold;
	}

	.q-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #202020;
		font-family: PingFang SC;
		line-height: 40rpx;
	}

	.q-title>view:nth-child(1) {
		position: relative;
		z-index: 4;
	}

	.q-line {
		background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
		width: 70rpx;
		height: 15rpx;
		margin-top: -15rpx;
	}

	.wz-title {
		color: #202020;
		font-size: 28rpx;
		margin-top: 40rpx;
		font-weight: bold;

		text {
			font-size: 24rpx;
			font-weight: normal;
			color: #848486;
		}
	}

	.wz-box {
		background: #F9F9F9;
		padding: 32rpx 20rpx;
		border-radius: 10rpx;
		width: 100%;
		margin-top: 20rpx;
	}

	.wz-name {
		font-size: 28rpx;
		color: #202020;
	}

	.wz-detail {
		margin-top: 20rpx;
		color: #4c4d4d;
	}

	.zd-btn,
	.kf-btn {
		background: rgba(#00b6b2, .2);
		color: #16aeb9;
		height: 82rpx;
		font-size: 28rpx;
		font-weight: bold;
		width: 280rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.kf-btn {
		width: 440rpx;
		background: #00b6b2;
		color: #FFFFFF;
		border-radius: 20rpx;
	}

	.chat-box {
		font-size: 20rpx;
		color: #6f7171;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-top: 10rpx;
			margin-right: 20rpx;
			border: #f5f3f5 solid 1px;
		}
	}
</style>